<template>
  <div class="content">
    <div class="form sign-in">
      <h2>欢迎回来</h2>
      <label>
        <span>登录名</span>
        <input v-model="user.loginName" type="text" />
      </label>
      <label>
        <span>密码</span>
        <input v-model="user.password" type="password" />
      </label>
      <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>

      <span><el-button type="text" @click="login" class="submit">登 录</el-button></span>
      <el-button type="text" class="submit"  @click="dialogVisible = true">注 册</el-button>
      <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号登录</button>
    </div>
    <div class="sub-cont">
      <div class="img">
        <div class="img__text m--up">
          <h2>还未注册？</h2>
          <p>立即注册，发现大量机会！</p>
        </div>
        <div class="img__text m--in">
          <h2>已有帐号？</h2>
          <p>有帐号就登录吧，好久不见了！</p>
        </div>

        <div class="img__btn">
         <span  class="m--up">  </span>
         <span> </span>
          <span class="m--in">登 录</span>
        </div>
      </div>

      <el-dialog
        title="注册页面"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        top="10px">

        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="70px" class="demo-ruleForm">
          <label>
          <el-form-item label="邮箱" prop="email">
            <el-input type="text" v-model="ruleForm2.email" auto-complete="off"></el-input>
          </el-form-item>
        </label>
          <label>
            <el-form-item label="登录名" prop="loginName">
              <el-input type="text" v-model="ruleForm2.loginName" auto-complete="off"></el-input>
            </el-form-item>
          </label>
          <label>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm2.password" auto-complete="off"></el-input>
            </el-form-item>
          </label>
        <label>
          <el-form-item label="确认密码" prop="checkpassword">
            <el-input type="password" v-model="ruleForm2.checkpassword" auto-complete="off"></el-input>
          </el-form-item>
        </label>
          <label>
            <el-form-item label="验证码" prop="code">
              <el-input type="text" v-model="ruleForm2.code" auto-complete="off"></el-input>
            </el-form-item>
          </label>
          <button type="button" :plain="true" @click="getcode" class="submit">获取验证码</button>
           <button type="button" :plain="true" @click="registry('ruleForm2'),dialogVisible = false" class="submit">注 册</button>
          <button type="button" @click="resetForm('ruleForm2')" class="submit">重置</button>
        </el-form>
      </el-dialog>

      <!--<div class="form sign-up">
        <h2>立即注册</h2>
        <label>
          <span>用户名</span>
          <input type="text" />
        </label>
        <label>
          <span>邮箱</span>
          <input type="email" />
        </label>
        <label>
          <span>密码</span>
          <input type="password" />
        </label>
        <button type="button" class="submit">注 册</button>
      </div>-->
    </div>
  </div>

</template>

<script>

    export default {
      data() {

        var validateEmail = (rule, value, callback) => {
          const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
          if (!value) {
            return callback(new Error('邮箱不能为空'));
          }
          if (!mailReg.test(value)) {
           return callback(new Error('请输入正确的邮箱格式'));
          }
          setTimeout(() => {
            this.$axios.post("/user/validataEmail?email="+this.ruleForm2.email).then(res=>{
              if (res.data.code==0){
                 callback(new Error('邮箱已被注册！'));
              }else{
                callback();
              }
            })
          }, 1000);
        };
        var validateloginName = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('登录名不能为空'));
          }
          setTimeout(() => {
            this.$axios.post("/user/validataloginName",this.ruleForm2).then(res=>{
              if (res.data.code==0){
                callback(new Error('用户名重复'));
              }else{
                callback();
              }
            })
          }, 1000);
        };
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.ruleForm2.checkpassword !== '') {
              this.$refs.ruleForm2.validateField('checkPass');
            }
            callback();
          }
        };
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.ruleForm2.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        var validatecode = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入验证码'));
          }
        };
        return {
          user:{
            loginName:'',
            password:'',
          },
          ruleForm2: {
            email: '',
            loginName: '',
            password: '',
            checkpassword:'',
            code:''
          },
          rules2: {
            email: [
              { validator: validateEmail, trigger: 'blur' }
            ],
            loginName:[
              { validator: validateloginName, trigger: 'blur' }
            ],
            password: [
              { validator: validatePass, trigger: 'blur' }
            ],
            checkpassword: [
              { validator: validatePass2, trigger: 'blur' }
            ],
            codes: [
              { validator: validatecode, trigger: 'blur' }
            ],
          },
          dialogVisible: false,
        };
      },
      methods: {
        handleClose(done) {
          this.$confirm('确认取消注册么？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        getcode:function () {
          const h = this.$createElement;

          this.$axios.get("/user/getCode?email="+this.ruleForm2.email).then(res=>{
            console.log(res.data.success)
            if (res.data.code==0) {
              this.$message({
                message: h('p', null, [
                  h('span', null, '验证码 '),
                  h('i', { style: 'color: teal' }, '发送成功！')
                ])
              });
            }else{
              this.$message({
                message: h('p', null, [
                  h('span', null, '验证码 '),
                  h('i', { style: 'color: teal' }, '发送失败！')
                ])
              });
            }

          })
        },
                registry(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              const h = this.$createElement;

              this.$axios.post("/user/registry",this.ruleForm2).then(res=>{
                console.log(res.data.success)
                if (res.data.code==0) {
                  this.$message({
                    message: h('p', null, [
                      h('span', null, '注册 '),
                      h('i', { style: 'color: teal' }, '成功！')
                    ])
                  });
                  this.diadialogVisible=true
                }else{
                  this.$message({
                    message: h('p', null, [
                      h('span', null, '注册 '),
                      h('i', { style: 'color: teal' }, '失败！')
                    ])
                  });
                }

              })
            } else {
              console.log('信息填写有误！');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        login:function () {
          this.$axios.post("/user/login",this.user).then(res=>{
            if (res.data.code==0){
              //将后台返回的token设置到cookie中
             var token = res.data.data;
             this.$cookies.set("token",token)
              console.log(token)
              this.$router.push("/");
            }else {
              this.$message.error(res.data.msg);
            }
          })
        }
      }
    }
</script>

<style scoped>
  *, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    background: #ededed;
  }

  input, button {
    border: none;
    outline: none;
    background: none;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  }

  .tip {
    font-size: 20px;
    margin: 40px auto 50px;
    text-align: center;
  }

  .content {
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px;
    height: 550px;
    margin: -300px 0 0 -450px;
    background: #fff;
  }

  .form {
    position: relative;
    width: 640px;
    height: 100%;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
    padding: 50px 30px 0;
  }

  .sub-cont {
    overflow: hidden;
    position: absolute;
    left: 640px;
    top: 0;
    width: 900px;
    height: 100%;
    padding-left: 260px;
    background: #fff;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  }

  .content.s--signup .sub-cont {
    -webkit-transform: translate3d(-640px, 0, 0);
    transform: translate3d(-640px, 0, 0);
  }

  button {
    display: block;
    margin: 0 auto;
    width: 260px;
    height: 36px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
  }

  .img {
    overflow: hidden;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 260px;
    height: 100%;
    padding-top: 360px;
  }

  .img:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 900px;
    height: 100%;
    background-image: url(../static/images/bg.jpg);
    background-size: cover;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  }

  .img:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
  }

  .content.s--signup .img:before {
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
  }

  .img__text {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    padding: 0 20px;
    text-align: center;
    color: #fff;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  }

  .img__text h2 {
    margin-bottom: 10px;
    font-weight: normal;
  }

  .img__text p {
    font-size: 14px;
    line-height: 1.5;
  }

  .content.s--signup .img__text.m--up {
    -webkit-transform: translateX(520px);
    transform: translateX(520px);
  }
  .img__text.m--in {
    -webkit-transform: translateX(-520px);
    transform: translateX(-520px);
  }

  .content.s--signup .img__text.m--in {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .img__btn {
    overflow: hidden;
    z-index: 2;
    position: relative;
    width: 100px;
    height: 36px;
    margin: 0 auto;
    background: transparent;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
  }
  .img__btn:after {
    content: '';
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 30px;
  }

  .img__btn span {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
  }

  .img__btn span.m--in {
    -webkit-transform: translateY(-72px);
    transform: translateY(-72px);
  }

  .content.s--signup .img__btn span.m--in {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .content.s--signup .img__btn span.m--up {
    -webkit-transform: translateY(72px);
    transform: translateY(72px);
  }

  h2 {
    width: 100%;
    font-size: 26px;
    text-align: center;
  }

  label {
    display: block;
    width: 260px;
    margin: 25px auto 0;
    text-align: center;
  }

  label span {
    font-size: 12px;
    color: #909399;
    text-transform: uppercase;
  }

  input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    text-align: center;
  }

  .forgot-pass {
    margin-top: 15px;
    text-align: center;
    font-size: 12px;
    color: #cfcfcf;
  }

  .forgot-pass a {
    color: #cfcfcf;
  }

  .submit {
    margin-top: 40px;
    margin-bottom: 20px;
    background: #d4af7a;
    text-transform: uppercase;
  }

  .fb-btn {
    border: 2px solid #d3dae9;
    color: #8fa1c7;
  }
  .fb-btn span {
    font-weight: bold;
    color: #455a81;
  }

  .sign-in {
    transition-timing-function: ease-out;
  }
  .content.s--signup .sign-in {
    transition-timing-function: ease-in-out;
    transition-duration: 0.6s;
    -webkit-transform: translate3d(640px, 0, 0);
    transform: translate3d(640px, 0, 0);
  }

  .sign-up {
    -webkit-transform: translate3d(-900px, 0, 0);
    transform: translate3d(-900px, 0, 0);
  }
  .content.s--signup .sign-up {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
</style>
